<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm = "searchForm" @refresh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;">
                           <div>
							                               <el-button type="success"  size="mini" icon="el-icon-plus"  @click="add(ids)" v-if="checkPermission('/admin/Logininfor/add.html')" >添加</el-button>
                               <el-button type="primary" :disabled="single" size="mini" icon="el-icon-edit"  @click="update(ids)" v-if="checkPermission('/admin/Logininfor/update.html')" >修改</el-button>  
							   <el-button type="danger" :disabled="multiple" size="mini" icon="el-icon-delete"  @click="del(ids)" v-if="checkPermission('/admin/Logininfor/delete.html')" >删除</el-button>     
                               <el-button type="info" :disabled="single" size="mini" icon="el-icon-view"  @click="detail(ids)" v-if="checkPermission('/admin/Logininfor/detail.html')" >查看详情</el-button>  
                               <el-button type="warning"  size="mini" icon="el-icon-download"  @click="dumpdata(ids)" v-if="checkPermission('/admin/Logininfor/dumpdata.html')" >导出</el-button>
                           </div>
                           <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
						</div>
					    <el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="info_id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">		   
						    <el-table-column align="center" type="selection" width="42"></el-table-column>
							<el-table-column align="center" type = '' v-if="fieldList[0].checked" property="info_id" label="ID" show-overflow-tooltip width="70">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[1].checked" property="login_name" label="登录账号" show-overflow-tooltip width="">
							       <template slot-scope="scope">  
     								  {{getLogin_nameValue(scope.row.login_name)}}
      							   </template>
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[2].checked" property="ipaddr" label="登录IP地址" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[3].checked" property="login_location" label="登录地点" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[4].checked" property="browser" label="浏览器类型" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[5].checked" property="os" label="操作系统" show-overflow-tooltip width="">
							</el-table-column>
							 <el-table-column align="center"  v-if="fieldList[6].checked" property="status" label="登录状态" show-overflow-tooltip width="">
								<template slot-scope="scope">
									 <el-tag type="success" v-if="scope.row.status == '0'" size="mini" effect="dark">登录成功</el-tag>
									 <el-tag type="danger" v-if="scope.row.status == '1'" size="mini" effect="dark">登录失败</el-tag>
								</template>
							</el-table-column>	
							<el-table-column align="center"  v-if="fieldList[7].checked" property="msg" label="提示消息" show-overflow-tooltip width="">
							</el-table-column>
							 <el-table-column align="center"  v-if="fieldList[8].checked" property="login_time" label="访问时间" show-overflow-tooltip width="">
								<template slot-scope="scope">
									{{parseTime(scope.row.login_time)}}
								</template>
							 </el-table-column>
							  <el-table-column :fixed="$store.getters.device !== 'mobile'?'right':false" label="操作" align="center" width="160">
								<template slot-scope="scope">
									<div v-if="scope.row.info_id">
										<el-button size="mini" type="primary" @click="update(scope.row)"  v-if="checkPermission('/admin/Logininfor/update.html')"><i class="el-icon-edit" />修改</el-button>
										<el-button size="mini" type="danger" @click="del(scope.row)"  v-if="checkPermission('/admin/Logininfor/delete.html')"><i class="el-icon-delete" />删除</el-button>
									</div>
								</template>
							  </el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>
	    <!--添加-->
		<Add  :show.sync="dialog.addDialogStatus" size="small" @refresh_list="index"></Add>
		<!--修改-->
		<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refresh_list="index"></Update>
		<!--查看详情-->
		<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refresh_list="index"></Detail>
	    <el-dialog title="导出进度条" :visible="dumpshow" :before-close="closedialog" width="500px">
			<el-progress :percentage="percentage"></el-progress>
		</el-dialog>
	</div>
</template>
<script>
	import {
	    index, 
	    updateExt, 
	    getUpdateInfo,  
	    del,
	    dumpdata,   
	} from '@/api/admin/logininfor'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import { confirm,param2Obj } from '@/utils/common'
	import Add from '@/views/admin/logininfor/add.vue'      
	import Update from '@/views/admin/logininfor/update.vue'      
	import Detail from '@/views/admin/logininfor/detail.vue'      
	import XLSX from "xlsx"      
	export default {
		name:'logininfor',
		components: {
			Search,
			Page,
			TableTool,
	        Add,  
	        Update,  
	        Detail,  
		},
		data(){
			return {
				dialog: {
	                    addDialogStatus : false,     
	                    updateDialogStatus : false,     
	                    detailDialogStatus : false,     
				},
				fieldList:[
					{lable:'ID',checked:true},
				    {lable:'登录账号',checked:true},
				    {lable:'登录IP地址',checked:true},
				    {lable:'登录地点',checked:true},
				    {lable:'浏览器类型',checked:true},
				    {lable:'操作系统',checked:true},
				    {lable:'登录状态',checked:true},
				    {lable:'提示消息',checked:true},
				    {lable:'访问时间',checked:true},
				],
				ids: [],
				selectRows:[],
				selectTotal:0,
				single:true,
				multiple:true,
				list: [],
				small_tables:{},
	            addInfo:{},
	            updateInfo:{},
	            detailInfo:{},
	            exceldata:[],
				dumppage:1,
				ws:{},
				dumpshow:false,
				percentage:0,
				filename:'',
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
				searchVisible:true,
				searchForm:[],
				searchData:{},
			}
		},
		methods: {
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page}
				Object.assign(param, this.searchData,param2Obj(this.$route.fullPath))
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.small_tables=res.sql_field_data
					this.page_data.total = res.data.total
					this.loading = false
					if(this.page_data.page == 1){
						this.searchForm = [
						       {type:'Select',label:'登录账号',prop:'login_name',data:res.sql_field_data.login_names,width:'150px'},
						       {type:'Select',label:'登录状态',prop:'status',data:[{"val":"0","label_color":"success","key":"登录成功"},{"val":"1","label_color":"danger","key":"登录失败"}],width:'150px'},
						        {type:'datetime',label:'访问时间',prop:'login_time',width:'150px'},
						]
					}
				})
			},
			getLogin_nameValue(e) {
               for (var i = 0; i < this.small_tables.login_names.length; i++) {
                 if (this.small_tables.login_names[i].val == e) {
                    return this.small_tables.login_names[i].key;
                 }
               }
             },
	 			updateExt(row,field){
				if(row.info_id){
					updateExt({info_id:row.info_id,[field]:row[field]}).then(res => {
						this.$message({message: '操作成功', type: 'success'})
					})
				}
			},
	 			add(){
				this.dialog.addDialogStatus = true
			},
	 			update(row){
				let id = row.info_id ? row.info_id : this.ids.join(',')
				getUpdateInfo({info_id:id}).then(res => {
					if(res.status == 200){
						this.dialog.updateDialogStatus = true
						this.updateInfo = res.data
					}
				})
			},
	 			del(row){
				confirm({content:'确定要操作吗'}).then(() => {
					let ids = row.info_id ? row.iinfo_id : this.ids.join(',')
					del({info_id:ids}).then(res => {
						this.$message({message: res.msg, type: 'success'})
						this.index()
					})
				}).catch(() => {})
			},
	 			detail(row){
				this.dialog.detailDialogStatus = true
				this.detailInfo = {info_id:row.info_id ? row.info_id : this.ids.join(',')}
			},
	 			dumpdata(){
				confirm({content:'确定要操作吗'}).then(() => {
					this.dumpshow = true
					this.confirmdumpdata()
				}).catch(() => {})
			},
			confirmdumpdata(){
				dumpdata({page:this.dumppage}).then(res => {
					if(res.data.length > 0){
						if(this.dumppage == 1){
							this.exceldata.push(res.header)
						}
						res.data.forEach((item) => {
							this.exceldata.push(Object.values(item))
						})
						this.percentage = res.percentage
						this.filename = res.filename
						this.ws = XLSX.utils.aoa_to_sheet(this.exceldata)
						this.dumppage = this.dumppage + 1
						this.confirmdumpdata()
					}else{
						let wb = XLSX.utils.book_new()
						XLSX.utils.book_append_sheet(wb, this.ws, '登录日志')
						XLSX.writeFile(wb, this.filename)
						this.dumpshow = false
					}
				})
			},
			closedialog(){
				this.dumpshow = false
			},
	 			selection(selection) {
			    this.selectRows=selection
			    this.selectTotal=selection.length
				this.ids = selection.map(item => item.info_id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex,event){
				if(event.target.className !== 'el-input__inner'){
					this.$refs.multipleTable.toggleRowSelection(row)
				}
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.info_id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
		},	
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>